﻿
<!doctype html>
<html lang="en-au">
<head>
    <title>jQuery.Gantt</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
    <link href="css/baimch.ganttstyle.css" rel="stylesheet" />
    <style type="text/css">
        body {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 13px;
            padding: 0 0 50px 0;
        }

        .contain {
            width: 800px;
            margin: 0 auto;
        }

        h1 {
            margin: 40px 0 20px 0;
        }

        h2 {
            font-size: 1.5em;
            padding-bottom: 3px;
            border-bottom: 1px solid #DDD;
            margin-top: 50px;
            margin-bottom: 25px;
        }

        table th:first-child {
            width: 150px;
        }
    </style>
</head>
<body>
    <div class="gantt_ot" style="width:800px; margin:100px auto; height:300px;">
        <div class="gantt"></div>
    </div>


</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/baimch.gantt.js"></script>
<script>

    $(function () {

        "use strict";

        $(".gantt").gantt({
            source: [
                {
                    groupname: "任务1",//左侧任务名称
                    groupstart: "2017/10/1",//左侧开始日期
                    groupend: "2018/10/2",//左侧结束日期
                    grouptask: [{
                        name: "1",
                        desc: "",
                        values: [{//道横图数据
                            desc: "计划:2017/10/27-2018/10/27",//鼠标放上去后提示文本
                            from: "2017/10/27",//道横图开始日期
                            to: "2018/10/27",//道横图结束日期
                            label: "项目验收",//道横图上显示文本
                            customClass: "ganttgray"//道横图颜色：ganttgray灰色，ganttRed红色,ganttGreen绿色.  也可定义其他颜色
                        }, {
                            from: "2018/10/27",
                            to: "2018/10/27",
                            desc:"这是一个大大的里程碑",
                            label: "",
                            customClass: "ganttLandmarkRed"//本样式为里程碑
                        }
                        ]
                    }, {
                        name: "2",
                        desc: "",
                        values: [{
                            from: "2017/10/01",
                            to: "2018/12/01",
                            label: "",
                            customClass: "ganttRed"
                        },
                        {
                            from: "2018/10/26/",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttLandmarkYellow"
                        }]
                    }, {
                        name: "3",
                        desc: "",
                        values: [{
                            from: "2017.10.20",
                            to: "2018.12.01",
                            label: "",
                            customClass: "ganttGreen"
                        }]
                    }]
                },
                {
                    groupname: "任务2",
                    groupstart: "2010/10/1",
                    groupend: "2013/10/2",
                    grouptask: [{
                        name: "1",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttgray"
                        }]
                    }, {
                        name: "2",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttRed"
                        }]
                    }, {
                        name: "3",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttGreen"
                        }]
                    }]
                },
                {
                    groupname: "任务3",
                    groupstart: "2010/10/1",
                    groupend: "2013/10/2",
                    grouptask: [{
                        name: "1",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttgray"
                        }]
                    }, {
                        name: "2",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttRed"
                        }]
                    }, {
                        name: "3",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttGreen"
                        }]
                    }]
                },
                {
                    groupname: "任务4",
                    groupstart: "2010/10/1",
                    groupend: "2013/10/2",
                    grouptask: [{
                        name: "1",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttgray"
                        }]
                    }, {
                        name: "2",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttRed"
                        }]
                    }, {
                        name: "3",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttGreen"
                        }]
                    }]
                },
                {
                    groupname: "任务5",
                    groupstart: "2010/10/1",
                    groupend: "2013/10/2",
                    grouptask: [{
                        name: "1",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttgray"
                        }]
                    }, {
                        name: "2",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttRed"
                        }]
                    }, {
                        name: "3",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2018/10/27",
                            label: "",
                            customClass: "ganttGreen"
                        }]
                    }]
                },
                {
                    groupname: "任务6",
                    groupstart: "2010/10/1",
                    groupend: "2013/10/2",
                    grouptask: [{
                        name: "1",
                        desc: "",
                        values: [{
                            from: "2017/10/27",
                            to: "2019/10/27",
                            label: "",
                            customClass: "ganttgray"
                        }]
                    }, {
                        name: "2",
                        desc: "",
                        values: [{
                            from: "2017/12/27",
                            to: "2019/10/27",
                            label: "",
                            customClass: "ganttRed"
                        }]
                    }, {
                        name: "3",
                        desc: "",
                        values: [{
                            from: "2017/11/27",
                            to: "2019/10/27",
                            label: "",
                            customClass: "ganttGreen"
                        }]
                    }]
                }



            ],
            shownavigate: false,
            navigate: 'scroll',//buttons  scroll
            scale: "months",// months  weeks days  hours
            maxScale: "months",
            minScale: "days",
            itemsPerPage: 90000,
            onItemClick: function (data) {
               alert("Item clicked - show some details");
            },
            onAddClick: function (dt, rowId) {
                //alert("Empty space clicked - add an item!");
            },
            onRender: function () {
                if (window.console && typeof console.log === "function") {
                    console.log("chart rendered");
                }
            }
        });

    });

</script>
